<template>
    <div>

<!--        头-->
        <div style="margin: 20px">
            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple-dark">
                    <el-select v-model="form.vmid" placeholder="请选择售货机id">
                        <el-option
                                v-for="item in options"
                                :key="item.vmid"
                                :label="item.vmid"
                                :value="item.vmid">
                        </el-option>
                    </el-select>

                    <el-select v-model="form.categoryId" placeholder="请选择商品类别" style="margin-left:20px;">
                        <el-option
                                v-for="item in options1"
                                :key="item.categoryId"
                                :label="item.categoryName"
                                :value="item.categoryId"
                        >
                        </el-option>
                    </el-select>

                    <el-button style="margin-left: 30px" type="primary"  @click="chuangjian()">立即创建</el-button>
                    <el-button style="margin-left: 30px" type="primary" @click="on()">立即查询</el-button>
                </div></el-col>

            </el-row>
        </div>

<!--        表格-->
        <div>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column label="商品图片" width="150">
                    <template slot-scope="scope">
                        <img :src="scope.row.comImage" class="head_pic" style="width: 85px;height: 85px"/>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="comName"
                        label="商品名称"
                        >
                </el-table-column>
                <el-table-column
                        prop="comPrice"
                        label="商品价格"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="comNum"
                        label="商品总数量"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop="vmid"
                        label="售货机ID"
                        width="120">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                       >
                    <template slot-scope="scope">
                        <el-button @click="zengjia(scope.row)" type="text" size="small">修改商品参数</el-button>
                        <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
<!--        from-->
        <el-dialog title="新增商品" :visible.sync="dialogFormVisible" center>
            <el-form :model="form">
                <el-form-item label="图片：" :label-width="formLabelWidth">
                    <el-upload
                            action="https://jsonplaceholder.typicode.com/posts/"
                            list-type="picture-card"
                            :http-request="getFile"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>

                </el-form-item>
                <el-form-item label="商品名称：" :label-width="formLabelWidth">
                    <el-input v-model="form.comName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品价格：" :label-width="formLabelWidth">
                    <el-input v-model="form.comPrice" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品数量：" :label-width="formLabelWidth">
                    <el-input-number v-model="form.comNum" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                </el-form-item>
                <el-button style="margin-left:45%;" type="primary" @click="ljcj()">立即新增</el-button>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
<!--        修改商品参数-->
        <el-dialog title="修改商品参数" :visible.sync="dialogTableVisible" width="20%" center>

            <el-form :model="form1">
                <el-form-item label="商品名称：" :label-width="formLabelWidth">
                    <el-input v-model="comName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品价格：" :label-width="formLabelWidth">
                    <el-input v-model="comMony" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品数量：" :label-width="formLabelWidth">
                    <el-input-number v-model="num1" @change="handle" :min="1" :max="10" label="描述文字"></el-input-number>
                </el-form-item>

            </el-form>
            <el-button type="primary" style="margin-left:150px;" @click="inst()">修改</el-button>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogTableVisible = false">确 定</el-button>
            </div>
        </el-dialog>
<!--    分页-->
    <div style="margin-top: 20px">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="1"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="400">
        </el-pagination>
    </div>

    </div>
</template>

<script>

    export default {
        name: "",
        data() {
            return {
                total: 0,
                page: 1,
                size: 5,
                tableData: [],//商品表格
                num: 1,//商品价格
                num1: '',//修改商品参数数量
                comName: '',//修改商品参数价格
                comMony:'',//修改商品参数价格
                commID: '',//新增商品id
                options: [],//售货机
                options1: [],//商品类别
                value1: [],
                value2: [],

                dialogFormVisible: false,
                dialogTableVisible: false,
                form:{
                    vmid:'',
                    categoryId:''
                },
                form1: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                form2: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',
                //上传图片
                dialogImageUrl: '',
                dialogVisible: false
            }
        },


        mounted() { //默认第一次加载
            inlpage(this);
        },
        created() {
            this.getUserList();
        },
        methods: {
            //分页
            indexMethod(index) {
                return index * 2;
            },
            handleSizeChange(val) { // 当前选择显示条数
                this.size = val
                inlpage(this)
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) { // 切换页面
                this.page = val
                inlpage(this)
                console.log(`当前页: ${val}`);
            },
            //修改商品参数
            zengjia(row) {
                console.log(row);
                this.dialogTableVisible = true;
                this.num1 = row.comNum;
                this.comName = row.comName;
                this.comMony = row.comPrice;
                this.commID = row.comId;
            },
            inst:function() {
                var comNum = this.num1;
                var comId = this.commID;
                var comName =  this.comName;
                var comPrice = this.comMony;
                console.log("asd", comNum);
                this.$axios.get('/updComm', {
                    params: {
                        comNum: comNum,
                        comId: comId,
                        comName:comName,
                        comPrice:comPrice
                    }
                }).then(resp => {
                    console.log(resp, "ss")
                    this.$message({
                        type: "success",
                        message: "新增成功!"
                    });
                })

            },
            handle(value) {
                console.log(value);
            },
            //新增商品
            ljcj :function (){
                var vmid = this.form.vmid;
                var cateid = this.form.categoryId;
                var comName =  this.form.comName;
                var comPrice = this.form.comPrice;
                var comNum =  this.form.comNum;
                console.log(vmid,cateid,comName,comPrice,comNum,"-=-==========[]")
                this.$axios.get('/inscomm', {
                    params:{
                        vmid:vmid,
                        cateid:cateid,
                        comName:comName,
                        comPrice:comPrice,
                        comNum:comNum
                    }
                }).then(res =>{
                    console.log(res)
                    this.$message({
                        type: "success",
                        message: "添加成功!"
                    });
                })
            },
            //删除
            del(row) {
                console.log("qwe", row.comId)
                this.$confirm("确认删除商品？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "danger"
                }).then(async () => {
                    this.$axios.get('/delComm', {
                        params: {
                            comId: row.comId
                        }
                    }).then(response => {
                        this.$message({
                            type: "success",
                            message: "删除成功!"
                        });

                    }).catch(err => {
                        alert(err)
                    })
                }).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });

            },

            //上传图片
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            },
            getFile(item){//图片上传
                console.log(item.file)
                this.file = item.file
                const fd = new FormData()
                fd.append('fileName', this.file)
                const config = {headers: { 'Content-Type': 'multipart/form-data' }}
                this.$axios.post('/upImg', fd, config
                ).then(response => {
                    if (response.data=='1'){
                        this.$message({
                            type: 'success',
                            message: '添加成功!'
                        })

                    }else{
                        this.$message({
                            type: 'info',
                            message: '发送失败'
                        })
                    }
                }).catch(err => {
                    this.$message({
                        type: 'info',
                        message: '发送失败'
                    })
                })
            },
            //点击新建
            chuangjian: function () {
                var vmid = this.form.vmid;
                var cateid = this.form.categoryId;

                if (vmid == '' && cateid == '') {
                    this.dialogFormVisible = false;
                    this.$message({
                        type: "info",
                        message: "请选择售货机!"
                    });

                } else {
                    this.dialogFormVisible = true;

                }
            },

            //查询
            on: function () {
                var vmid = this.form.vmid;
                var cateid = this.form.categoryId;
                inlpage(this,vmid,cateid)//分页
                this.$message({
                    type: "success",
                    message: "查询成功!"
                });
            },

        },




    }
    function inlpage($this,vmid,cateid){


        $this.$axios.get('/selpage',{
            params:{
                page: $this.page,
                size: $this.size,
                vmid:vmid,
                cateid:cateid
            }

        }).then(resp => {
            console.log(resp)

            if (resp) {
                $this.tableData = resp.data.tbcommdityList
                $this.total = resp.data.count
                    $this.options = resp.data.vimList
                    $this.options1 = resp.data.commcategoryList

            }
        })
    }
</script>

<style scoped>

</style>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
